.accidentList {
  width: 100%;
  height: 100%;
  .et-flex-column-normal();

  .header-box {
    width: 100%;
    height: 62px;
    line-height: 62px;
    background: white;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: @font-size-large;
    color: #666666;
    font-weight: 700;
    margin-bottom: 20px;
    .et-flex-spacebetween();

    .export-btn {
      height: 28px;
      line-height: 28px;
      padding: 0 20px;
      width: auto;
      font-size: 14px;
      color: #999;
      background: #fff;
      border: 1px solid #e3e3e3;
      cursor: pointer;
      .et-flex-start();

      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }

      &:hover {
        border: 1px solid @primary-color;
        color: @primary-color;
      }
    }
  }

  .accidentList-content {
    width: 100%;

    .tips {
      width: 100%;
      padding: 5px 0;
      box-sizing: border-box;
      font-size: @font-size-base;
      color: red;
      line-height: 24px;

      p {
        margin: 0;
      }
    }

    .accidentList-nav {
      width: 100%;
      padding: 10px 20px 20px;
      box-sizing: border-box;
      background-color: white;
      .et-flex-start();

      .nav-item {
        margin-right: 40px;
        cursor: pointer;
        line-height: 30px;
        font-size: @font-size-large;
        padding-bottom: 5px;

        &:hover {
          color: @primary-color;

          .nav-item-noActived {
            color: @primary-color;
            border-bottom: 2px solid transparent;
          }
        }

        .text {
          padding-bottom: 7px;
        }

        .nav-item-actived {
          color: @primary-color;
          border-bottom: 2px solid @primary-color;
        }

        .nav-item-noActived {
          color: #666666;
          border-bottom: 2px solid transparent;
        }
      }
    }

    .accidentList-filter {
      width: 100%;
      padding: 10px 20px 20px;
      box-sizing: border-box;
      background-color: white;

      .filter-form {
        width: 100%;
        padding: 5px 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #dcdfe6;

        .button {
          width: 78px;
          color: white;
          background: @primary-color;
          margin-left: 10px;
        }
      }

      .filter-row {
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        .et-flex-start();
        position: relative;

        &:last-child {
          border-bottom: 2px solid #dcdfe6;
        }

        .filter-label {
          width: 70px;
          flex-shrink: 0;
        }

        .filter-cols {
          max-width: 550px;
          margin-left: 10px;
          .et-flex-normal();

          .filter-col {
            padding: 7px 15px;
            box-sizing: border-box;
            border: 1px solid #dcdfe6;
            margin-right: 10px;
            cursor: pointer;
            .et-flex-center();

            &.checked {
              color: white;
              background: @primary-color;
            }

            &:hover {
              color: @primary-color;
            }

            &.checked:hover {
              color: white;
            }
          }
        }

        .whole {
          width: 80px;
          height: 34px;
          line-height: 34px;
          color: white;
          background: @primary-color;
          text-align: center;
          margin-left: 15px;
          cursor: pointer;
        }

        .filter-senior {
          position: absolute;
          right: 0;
          width: 100px;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dcdfe6;
          text-align: center;
          cursor: pointer;

          .actived {
            color: @primary-color;
          }

          .icon-down {
            margin-left: 2px;
          }

          .icon-up {
            color: @primary-color;
            margin-left: 2px;
          }
        }
      }

      .advan-box {
        width: 100%;
        padding-top: 20px;
        box-sizing: border-box;

        .advan-box-form {
          width: 100%;
          margin: 0 auto;

          .advan-box-row {
            width: 100%;
            padding: 0 100px;
            box-sizing: border-box;
            margin-bottom: 20px;
            .et-flex-start();

            .form-item {
              flex: 1;
              .et-flex-start();

              .form-label {
                width: 30%;
                .et-flex-end();
                margin-right: 5px;
              }
            }

            .button {
              width: 78px;
              height: 34px;
              color: white;
              background: @primary-color;
              border-radius: 3px;
              cursor: pointer;
              .et-flex-center();
            }

            .plain {
              width: 78px;
              height: 34px;
              margin-right: 25px;
              border-radius: 3px;
              background-color: white;
              color: @primary-color;
              border: 1px solid @primary-color;
              cursor: pointer;
              .et-flex-center();
            }
          }
        }
      }
    }

    .accident-list {
      width: 100%;
      background-color: #f4f4f4;

      .accident-list-thead {
        width: 100%;
        line-height: 42px;
        font-size: @font-size-base;
        color: #333333;
        .et-flex-start();

        .col-1 {
          width: 678px;
          text-align: left;
          padding-left: 15px;
        }

        .col-2 {
          width: 125px;
          text-align: center;
        }

        .col-3 {
          width: 180px;
          text-align: center;
        }
      }

      .no-message {
        width: 100%;
        height: 600px;
        background: white;
        .et-flex-center();
      }

      .order-item {
        width: 100%;
        background: white;
        // // :not(:last-child) {
        //   border-bottom: 1px solid #e3e3e3;
        // // }
        margin-bottom: 10px;

        .order-item-headerBox {
          width: 100%;
          padding: 0 15px;
          box-sizing: border-box;
          border-bottom: 1px solid #e3e3e3;
          line-height: 42px;
          font-size: @font-size-base;
          color: #333333;
          .et-flex-start();

          .orderNum {
            display: block;
            width: 300px;
          }

          .fr {
            flex: 1;
            .et-flex-end();
            position: relative;

            span {
              color: @second-color;
              cursor: pointer;
              text-decoration: underline;
            }
          }
        }

        .order-item-content {
          width: 100%;
          padding: 30px 0;
          box-sizing: border-box;
          .et-flex-start();

          .order-item-info {
            width: 678px;
            padding: 0 40px 0 15px;
            box-sizing: border-box;
            .et-flex-normal();

            img {
              width: 154px;
              height: 104px;
              flex-shrink: 0;
            }

            .prod-info {
              flex: 1;
              padding: 0 10px;
              box-sizing: border-box;
              .et-flex-column-normal();

              .title {
                width: 100%;
                margin-bottom: 12px;
                font-size: @font-size-large;
                line-height: 1.5;
                font-weight: 700;
                cursor: pointer;
              }

              .order-item-row {
                font-size: @font-size-base;
                color: #333;
                margin-bottom: 10px;

                .value {
                  color: @primary-color;
                }
              }
            }
          }

          .order-item-money {
            line-height: 35px;
            .et-flex-column-center();

            .status {
              color: @second-color;
            }

            .money {
              // padding: 20px 0;
              font-size: @font-size-large;
              font-weight: 700;
              color: @primary-color;
            }
          }

          .order-item-operate {
            width: 200px;
            .et-flex-column-center();
            margin-left: 20px;

            .download {
              width: 114px;
              padding: 10px 0;
              box-sizing: border-box;
              text-align: center;
              background: #edf7f7;
              color: @second-color;
              border-radius: 3px;
              cursor: pointer;
              margin-bottom: 5px;

              &:hover {
                background: @second-color;
                color: white;
              }
            }

            span {
              margin: 4px 0;
            }

            .detail {
              &:hover {
                color: @primary-color;
                cursor: pointer;
              }
            }
          }
        }
      }

      .pagination {
        width: 100%;
        margin: 15px 0 10px;
        .et-flex-center();
      }
    }
  }
}

.dropDown {
  width: 500px;
  max-height: 600px;
  background: #f4f4f4;
  z-index: 2081;

  .dropDown-list {
    .et-flex-normal();

    .dropDown-item {
      padding: 7px 15px;
      box-sizing: border-box;
      border: 1px solid #dcdfe6;
      margin: 5px 5px;
      background-color: white;
      cursor: pointer;
      .et-flex-center();

      &.checked {
        color: white;
        background: @primary-color;
      }

      &:hover {
        color: @primary-color;
      }

      &.checked:hover {
        color: white;
      }
    }
  }
}